{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "using D3Trees"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "    <!DOCTYPE html>\n",
       "    <html>\n",
       "    <head>\n",
       "        <meta charset=\"UTF-8\">\n",
       "        <title>Julia D3Tree</title>\n",
       "    </head>\n",
       "    <body>\n",
       "    <div id=\"treevisxPH3Xps5\">\n",
       "    <style>\n",
       "        \n",
       ".node {\n",
       "    cursor: pointer;\n",
       "}\n",
       "\n",
       ".node circle {\n",
       "\t  fill: #fff;\n",
       "\t  stroke: steelblue;\n",
       "\t  stroke-width: 3px;\n",
       "      r: 10;\n",
       "}\n",
       "\n",
       ".node rect {\n",
       "\t  fill: #fff;\n",
       "\t  stroke: steelblue;\n",
       "\t  stroke-width: 3px;\n",
       "      x: -10;\n",
       "      y: -10;\n",
       "      width: 20;\n",
       "      height: 20;\n",
       "}\n",
       "\n",
       ".node path {\n",
       "    fill: #ffffff;\n",
       "    /* stroke: steelblue; */\n",
       "    stroke-width: 2px;\n",
       "}\n",
       ".node text {\n",
       "    font-family: Arial, Helvetica, sans-serif;\n",
       "    font-style: normal;\n",
       "    font-size: 12px;\n",
       "}\n",
       ".link /* path */ {\n",
       "    fill: none;\n",
       "    stroke: #cccccc;\n",
       "    stroke-width: 2px;\n",
       "}\n",
       ".link text {\n",
       "    font-family: Arial, Helvetica, sans-serif;\n",
       "    font-style: normal;\n",
       "    font-size: 12px;\n",
       "}\n",
       ".hover text{\n",
       "    font-family: Arial, Helvetica, sans-serif;\n",
       "    font-style: normal;\n",
       "    font-size: 12px;\n",
       "}\n",
       "\n",
       "/*\n",
       ".svg-container {\n",
       "    display: inline-block;\n",
       "    position: relative;\n",
       "    width: 100%;\n",
       "    padding-bottom: 100%;\n",
       "    vertical-align: top;\n",
       "    overflow: hidden;\n",
       "}\n",
       ".svg-content-responsive {\n",
       "    display: inline-block;\n",
       "    position: absolute;\n",
       "    top: 10px;\n",
       "    left: 0;\n",
       "}\n",
       "*/\n",
       "\n",
       "    </style>\n",
       "    <script>\n",
       "       (function(){\n",
       "        var treeData = {\"children\":[[2,3],[],[4],[]],\"text\":[\"one\\n(second line)\",\"2\",\"III\",\"four\"],\"tooltip\":[\"pops\",\"up\",\"on\",\"hover\"],\"style\":[\"\",\"fill:red\",\"r:14\",\"opacity:0.7\"],\"link_style\":[\"\",\"stroke:blue\",\"\",\"stroke-width:10px\"],\"title\":\"Julia D3Tree\"};\n",
       "        var rootID = 1-1;\n",
       "        var div = \"treevisxPH3Xps5\";\n",
       "        if (typeof $ === 'undefined') {\n",
       "    loadScript(\"https://code.jquery.com/jquery-3.1.1.min.js\", run)\n",
       "} else {\n",
       "    run()\n",
       "}\n",
       "\n",
       "function run() {\n",
       "    if (typeof d3 === 'undefined') {\n",
       "        loadScript(\"https://d3js.org/d3.v3.js\", showTree)\n",
       "        /*\n",
       "        if (typeof d3 === 'undefined') {\n",
       "            $(\"#\"+div).append(\"Unable to load d3 library.\\n\\nD3Trees.jl requires an internet connection - are you connected? To help fix this, see https://github.com/sisl/D3Trees.jl/issues/10\")\n",
       "        }\n",
       "        */\n",
       "    } else {\n",
       "        showTree()\n",
       "    }\n",
       "}\n",
       "\n",
       "function loadScript(url, callback)\n",
       "{\n",
       "    console.log(\"starting script load...\")\n",
       "    // Adding the script tag to the head as suggested before\n",
       "    var head = document.getElementsByTagName('head')[0];\n",
       "    var script = document.createElement('script');\n",
       "    script.type = 'text/javascript';\n",
       "    script.src = url;\n",
       "\n",
       "    // Then bind the event to the callback function.\n",
       "    // There are several events for cross browser compatibility.\n",
       "    script.onreadystatechange = callback;\n",
       "    script.onload = callback;\n",
       "\n",
       "    // Fire the loading\n",
       "    head.appendChild(script);\n",
       "}\n",
       "\n",
       "function showTree() {\n",
       "        \n",
       "    // var margin = {top: 20, right: 120, bottom: 20, left: 120},\n",
       "    var margin = {top: 20, right: 120, bottom: 80, left: 120},\n",
       "        width = $(\"#\"+div).width() - margin.right - margin.left,\n",
       "        height = 600 - margin.top - margin.bottom;\n",
       "        // TODO make height a parameter of TreeVisualizer\n",
       "\n",
       "    var i = 0,\n",
       "        duration = 750,\n",
       "        root;\n",
       "\n",
       "    var tree = d3.layout.tree()\n",
       "        .size([width, height]);\n",
       "\n",
       "    var diagonal = d3.svg.diagonal();\n",
       "        //.projection(function(d) { return [d.y, d.x]; });\n",
       "        // uncomment above to make the tree go horizontally\n",
       "\n",
       "    // see http://stackoverflow.com/questions/16265123/resize-svg-when-window-is-resized-in-d3-js\n",
       "    if (d3.select(\"#\"+div+\"_svg\").empty()) {\n",
       "        d3.select(\"#\"+div).append(\"svg\")\n",
       "            .attr(\"id\", div+\"_svg\")\n",
       "            .attr(\"width\", width + margin.right + margin.left)\n",
       "            .attr(\"height\", height + margin.top + margin.bottom);\n",
       "    }\n",
       "\n",
       "    d3.select(\"#\"+div+\"_svg\").selectAll(\"*\").remove();\n",
       "\n",
       "    var svg = d3.select(\"#\"+div+\"_svg\")\n",
       "        .append(\"g\")\n",
       "            .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
       "\n",
       "    // console.log(\"tree data:\");\n",
       "    // console.log(treeData[rootID]);\n",
       "    root = createDisplayNode(rootID);\n",
       "    root.x0 = width / 2;\n",
       "    root.y0 = 0;\n",
       "\n",
       "    update(root);\n",
       "    console.log(\"tree should appear\");\n",
       "\n",
       "    function createDisplayNode(id) {\n",
       "      var dnode = {\"dataID\":id,\n",
       "                   \"children\":null,\n",
       "                   \"_children\":null};\n",
       "      return dnode;\n",
       "    }\n",
       "\n",
       "    function initializeChildren(d) {\n",
       "      // create children\n",
       "      var children = treeData.children[d.dataID];\n",
       "      d.children = [];\n",
       "      if (children) {\n",
       "        for (var i = 0; i < children.length; i++) {\n",
       "          var cid = children[i]-1;\n",
       "          d.children.push(createDisplayNode(cid));\n",
       "        }\n",
       "      }\n",
       "    }\n",
       "\n",
       "    /**\n",
       "     * Recursively called to update each node in the tree.\n",
       "     * \n",
       "     * source is a d3 node that has position, etc.\n",
       "    */\n",
       "    function update(source) {\n",
       "\n",
       "      width = $(\"#\"+div).width() - margin.right - margin.left,\n",
       "      height = $(\"#\"+div).height() - margin.top - margin.bottom;\n",
       "\n",
       "      tree.size([width,height]);\n",
       "      d3.select(\"#\"+div).attr(\"width\", width + margin.right + margin.left)\n",
       "            .attr(\"height\", height + margin.top + margin.bottom);\n",
       "      d3.select(\"#\"+div+\"_svg\").attr(\"width\", width + margin.right + margin.left)\n",
       "             .attr(\"height\", height + margin.top + margin.bottom);\n",
       "\n",
       "\n",
       "      // Compute the new tree layout.\n",
       "      var nodes = tree.nodes(root).reverse(),\n",
       "          links = tree.links(nodes);\n",
       "\n",
       "\n",
       "      // Update the nodes…\n",
       "      var node = svg.selectAll(\"g.node\")\n",
       "          .data(nodes, function(d) { return d.id || (d.id = ++i); });\n",
       "\n",
       "      // Enter any new nodes at the parent's previous position.\n",
       "      var nodeEnter = node.enter().append(\"g\")\n",
       "          .attr(\"class\", \"node\")\n",
       "          .attr(\"transform\", function(d) { return \"translate(\" + source.x0 + \",\" + source.y0 + \")\"; })\n",
       "          .on(\"click\", click)\n",
       "\n",
       "      nodeEnter.append(\"circle\")\n",
       "          .attr(\"r\", \"10px\")\n",
       "          .attr(\"style\", function(d) { return treeData.style[d.dataID]; } )\n",
       "\n",
       "      var tbox = nodeEnter.append(\"text\")\n",
       "          .attr(\"y\", 25)\n",
       "          .attr(\"text-anchor\", \"middle\")\n",
       "          //.text( function(d) { return treeData.text[d.dataID]; } )\n",
       "          .style(\"fill-opacity\", 1e-6);\n",
       "\n",
       "      tbox.each( function(d) {\n",
       "          var el = d3.select(this)\n",
       "          var text = treeData.text[d.dataID];\n",
       "          var lines = text.split('\\n');\n",
       "          for (var i = 0; i < lines.length; i++) {\n",
       "              var tspan = el.append(\"tspan\").text(lines[i]);\n",
       "              if (i > 0) {\n",
       "                  tspan.attr(\"x\", 0).attr(\"dy\", \"1.2em\");\n",
       "              }\n",
       "          }\n",
       "      });\n",
       "\n",
       "      //tooltip\n",
       "      nodeEnter.append(\"title\").text( function(d) { return treeData.tooltip[d.dataID];} );\n",
       "\n",
       "      // Transition nodes to their new position.\n",
       "      var nodeUpdate = node.transition()\n",
       "          .duration(duration)\n",
       "          .attr(\"transform\", function(d) { return \"translate(\" + d.x + \",\" + d.y + \")\"; });\n",
       "\n",
       "      nodeUpdate.select(\"text\")\n",
       "          .style(\"fill-opacity\", 1);\n",
       "\n",
       "      // Transition exiting nodes to the parent's new position.\n",
       "      var nodeExit = node.exit().transition()\n",
       "          .duration(duration)\n",
       "          .attr(\"transform\", function(d) { return \"translate(\" + source.x + \",\" + source.y + \")\"; })\n",
       "          .remove();\n",
       "\n",
       "      nodeExit.select(\"text\")\n",
       "          .style(\"fill-opacity\", 1e-6);\n",
       "\n",
       "      // Update the links…\n",
       "      var link = svg.selectAll(\"path.link\")\n",
       "          .data(links, function(d) { return d.target.id; });\n",
       "\n",
       "      // Enter any new links at the parent's previous position.\n",
       "      // XXX link width should be based on transition data, not node data\n",
       "      link.enter().insert(\"path\", \"g\")\n",
       "          .attr(\"class\", \"link\")\n",
       "          .attr(\"style\", function(d) {\n",
       "              var ls = treeData.link_style[d.target.dataID];\n",
       "              return ls;\n",
       "          } )\n",
       "          .attr(\"d\", function(d) {\n",
       "            var o = {x: source.x0, y: source.y0};\n",
       "            return diagonal({source: o, target: o});\n",
       "          });\n",
       "\n",
       "      // Transition links to their new position.\n",
       "      link.transition()\n",
       "          .duration(duration)\n",
       "          .attr(\"d\", diagonal);\n",
       "\n",
       "      // Transition exiting nodes to the parent's new position.\n",
       "      link.exit().transition()\n",
       "          .duration(duration)\n",
       "          .attr(\"d\", function(d) {\n",
       "            var o = {x: source.x, y: source.y};\n",
       "            return diagonal({source: o, target: o});\n",
       "          })\n",
       "          .remove();\n",
       "\n",
       "      // Stash the old positions for transition.\n",
       "      nodes.forEach(function(d) {\n",
       "        d.x0 = d.x;\n",
       "        d.y0 = d.y;\n",
       "      });\n",
       "    }\n",
       "\n",
       "    // Toggle children on click.\n",
       "    function click(d) {\n",
       "      if (d.children) {\n",
       "        d._children = d.children;\n",
       "        d.children = null;\n",
       "      } else if (d._children) {\n",
       "        d.children = d._children;\n",
       "        d._children = null;\n",
       "      } else {\n",
       "        initializeChildren(d);\n",
       "      }\n",
       "      update(d);\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "        })();\n",
       "    </script>\n",
       "    </div>\n",
       "    </body>\n",
       "    </html>\n",
       "\n"
      ],
      "text/plain": [
       "one\n",
       "(second line)\n",
       "├──2\n",
       "└──III\n",
       "   └──four\n"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "children = [[2,3], [], [4], []]\n",
    "text = [\"one\\n(second line)\", \"2\", \"III\", \"four\"]\n",
    "style = [\"\", \"fill:red\", \"r:14\", \"opacity:0.7\"]\n",
    "link_style = [\"\", \"stroke:blue\", \"\", \"stroke-width:10px\"]\n",
    "tooltip = [\"pops\", \"up\", \"on\", \"hover\"]\n",
    "t = D3Tree(children,\n",
    "           text=text,\n",
    "           style=style,\n",
    "           tooltip=tooltip,\n",
    "           link_style=link_style)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "kernelspec": {
   "display_name": "Julia 0.6.0",
   "language": "julia",
   "name": "julia-0.6"
  },
  "language_info": {
   "file_extension": ".jl",
   "mimetype": "application/julia",
   "name": "julia",
   "version": "0.6.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}
